<template>
  <div >
    <div class="modeNavBar row">
      <ul class="chooseOpton row f18 clr_333 ">
        <li>{{navTitle}}</li>
        <li class="pl5" v-if="secondTitle">{{secondTitle}}</li>
        <li class="optionItem pl20 pr20 f16 fwb"  v-for="(item, index) in list" :key="index" :class="isActive == index ? 'active':''"  v-show="item.Ishow" @click="changeNav(index,item)">{{item.name}} {{item.num}}</li>
      </ul>
      <slot name="btn"></slot>
    </div>

  </div>
</template>

<script>
export default {
  name: 'HeadTabSwitch',
  data () {
    return {
      // isActive: 0
    }
  },
  watch: {
    isActive: function (val) {
      // console.log('this.isActive111', val)
    }
  },
  mounted () {
    // console.log('this.isActive000', this.isActive)
  },
  methods: {
    changeNav (index, item) {
      // this.isActive = index
      this.$emit('changeNav', item)
    }
  },
  props: {
    navTitle: {
      type: String,
      required: true
    },
    secondTitle: {
      type: String,
      required: false
    },
    list: {
      type: Array,
      required: false
    },
    isActive: {
      type: String,
      required: false
    }
  },
  components: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.modeNavBar{
  height: 58px;
  width: 100%;
}
.chooseOpton{
  width: 100%;
  line-height: 36px;
}
.active{
  border-bottom: 2px solid #409EFF !important;
  color: #409EFF !important;
}
</style>
